<template>
  <div>
    <UiBreadcrumbs
      :items="breadcrumbs"
      class="_breadcrumbs _container"
    />
    <ViewModels
      v-if="models"
      :data="models"
      :status="status"
      :h1="h1"
      :letter="slug"
      :top-model-items="topModels?.items"
    />
    <div
      v-else
      class="_loading"
    />
  </div>
</template>

<script setup lang="ts">
import type { IBreadcrumbItem } from '../../../types';
import { convertString, AsyncData } from '../../../runtime';
import { ModelsApiService } from '../../../services/api/models.service';
import { sortModels } from '../../../lib';

const { t } = useI18n();
const pageName = useRoute().name;
const pagePureName = useGetPureRouteName();
const slug = useSlug();
const metaTitle = computed(() => convertString().toCapitalize(slug.value));

const [
  { data: topModels },
  { data: models, status },
] = await Promise.all([
  useFetchTopModels(ModelsApiService.getTop, 12, AsyncData.TopModelsMore, String(pageName)),
  useFetchModelsByLetter(ModelsApiService.getListByNicheAndLetter),
]);

const { meta, h1 } = useMeta({
  t,
  pageKey: pagePureName,
  brandName: useAppConfig().brandName,
  sortOptions: sortModels,
  text: metaTitle,
  seo: () => models.value?.seo,
});

watchEffect(() => {
  useHead(meta.value);
});

const breadcrumbs = [
  {
    name: t('navigation.main'),
    to: '/',
  },
  {
    name: t('navigation.models'),
    to: '/models',
  },
  {
    name: metaTitle.value,
  },
] as IBreadcrumbItem[];
</script>
